<template>
    <div class="create">
        <p class="title">创建物料清单</p>
        <el-form :model="createForm" :rules="rules" ref="createForm" label-width="120px" size="mini">
            <el-form-item label="父项产品" prop="parentProductId">
                <search-input @getSelectInfo="getSelectInfo" :type="'parent'"></search-input>
            </el-form-item>
            <el-form-item style='margin-bottom:15px' v-show="createForm.parentProductId">
                <div class="productDisplay__e5bCl">
                    <div class="productDisplayItem__gvh_D">
                        <div class="productDisplayItemLabel__95jJE">产品编号</div>
                        <div class="productDisplayItemValue__I8W5_">{{parentTarget.code}}</div>
                    </div>
                    <div class="productDisplayItem__gvh_D">
                        <div class="productDisplayItemLabel__95jJE">产品名称</div>
                        <div class="productDisplayItemValue__I8W5_">{{parentTarget.name}}</div>
                    </div>
                    <div class="productDisplayItem__gvh_D">
                        <div class="productDisplayItemLabel__95jJE">产品规格</div>
                        <div class="productDisplayItemValue__I8W5_">{{parentTarget.specification}}</div>
                    </div>
                    <div class="productDisplayItem__gvh_D">
                        <div class="productDisplayItemLabel__95jJE">产品属性</div>
                        <div class="productDisplayItemValue__I8W5_">{{parentTarget.attributeName}}</div>
                    </div>
                    <div class="productDisplayItem__gvh_D">
                        <div class="productDisplayItemLabel__95jJE">单位</div>
                        <div class="productDisplayItemValue__I8W5_">{{parentTarget.unitName}}</div>
                    </div>
                    <div class="productDisplayItem__gvh_D">
                        <div class="productDisplayItemLabel__95jJE">工艺路线</div>
                        <div class="productDisplayItemValue__I8W5_">{{parentTarget.processRouteName}}</div>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="子项产品" prop="childProductId">
                <search-input @getSelectInfo="getSelectInfo" :type="'child'" ref="childInput"></search-input>
            </el-form-item>
            <el-form-item style='margin-bottom:15px' v-show="createForm.childProductId">
                <div class="productDisplay__e5bCl">
                    <div class="productDisplayItem__gvh_D">
                        <div class="productDisplayItemLabel__95jJE">产品编号</div>
                        <div class="productDisplayItemValue__I8W5_">{{childTarget.code}}</div>
                    </div>
                    <div class="productDisplayItem__gvh_D">
                        <div class="productDisplayItemLabel__95jJE">产品名称</div>
                        <div class="productDisplayItemValue__I8W5_">{{childTarget.name}}</div>
                    </div>
                    <div class="productDisplayItem__gvh_D">
                        <div class="productDisplayItemLabel__95jJE">产品规格</div>
                        <div class="productDisplayItemValue__I8W5_">{{childTarget.specification}}</div>
                    </div>
                     <div class="productDisplayItem__gvh_D">
                        <div class="productDisplayItemLabel__95jJE">产品属性</div>
                        <div class="productDisplayItemValue__I8W5_">{{childTarget.attributeName}}</div>
                    </div>
                    <div class="productDisplayItem__gvh_D">
                        <div class="productDisplayItemLabel__95jJE">单位</div>
                        <div class="productDisplayItemValue__I8W5_">{{childTarget.unitName}}</div>
                    </div>
                    <div class="productDisplayItem__gvh_D">
                        <div class="productDisplayItemLabel__95jJE">工艺路线</div>
                        <div class="productDisplayItemValue__I8W5_">{{childTarget.processRouteName}}</div>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="单位用量" prop="unitUsage">
                <el-input-number v-model="createForm.unitUsage" controls-position="right" :min="0" placeholder="请输入"></el-input-number>
            </el-form-item>
            <el-form-item label="备注">
                <el-input type="textarea" :rows="4" v-model="createForm.remark">
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="mini" plain @click="backBomList">取 消</el-button>
                <el-button type="primary" size="mini" plain @click="handleSubmit('continue')">继续添加子项</el-button>
                <el-button type="primary" size="mini" @click="handleSubmit('save')">保 存</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import {
        bomEdit,
    } from '@/api/baseController'
    import searchInput from './searchInput.vue'
    export default {
        data() {
            return {
                createForm: {
                    parentProductId: '',
                    childProductId: '',
                    unitUsage: undefined,
                    remark: ''
                },
                rules: {
                    parentProductId: [{
                        required: true,
                        message: '父项产品不能为空!'
                    }],
                    childProductId: [{
                        required: true,
                        message: '子项产品不能为空!'
                    }],
                    unitUsage: [{
                        required: true,
                        message: '单位用量不能为空!',
                        trigger:'blur'
                    }]
                },
                parentTarget:{},
                childTarget:{}
            }
        },
        components: {
            searchInput
        },
        methods: {
            bomEditFn:async function (data,type){
                const res = await bomEdit(data)
                if(res.code === 200){
                    if(type === 'save'){
                        this.backBomList()
                        return
                    }
                    //继续添加子项
                    this.createForm.childProductId = ''
                    this.createForm.unitUsage = undefined
                    this.createForm.remark = ''
                    this.$refs.childInput.reset()
                    this.utils.showMsg(type === 'save' ? '创建成功' : '子项产品添加成功', 'success')
                }
            },
            //获取父子项信息
            getSelectInfo(payload) {
                const {
                    type,
                    target
                } = payload
                type === 'parent' ? this.createForm.parentProductId = target.id : this.createForm.childProductId = target.id
                type === 'parent' ? this.parentTarget = target : this.childTarget = target
            },
            backBomList(){
                this.$router.push('/basicData/materials')
            },
            handleSubmit(type) {
                this.$refs.createForm.validate((valid) => {
                    if (valid) {
                        const {parentProductId,childProductId} = this.createForm
                        if(parentProductId === childProductId) {
                            this.utils.showMsg('父项产品与子项产品不能相同', 'error')
                            return
                        }
                        this.bomEditFn(this.createForm,type)
                    } else {
                        return false
                    }
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    .create {
        padding: 20px;
        overflow-y: auto;

        .title {
            font-size: 22px;
            color: #1f273d;
            margin-bottom: 30px;
        }

        .productDisplay__e5bCl{
            width: 600px;
            border: 1px solid #e5e5e5;
            .productDisplayItemLabel__95jJE{
                width: 70px;
                text-align: right;
            }
        }

        ::v-deep .el-button--primary span {
            padding: 4px 20px;
        }

        .el-input-number,
        .el-textarea {
            width: 300px;
        }
    }
</style>